<template>
	<view class="main">
		<topCommonTitleBar class="topBar" arrow="black" titleColor="#333333" :isBackClick="true" :statePerch="true"
			positionType="fixed">
		</topCommonTitleBar>
		<view class="content">
			<view class="content_title">{{ problemInfo.title }}</view>
			<u-parse :lazyLoad="true" :content="problemInfo.answer_content" class="content_dsc"></u-parse>

			<view class="content_basis">
				<view class="basils_item" v-if="problemInfo.pursuant_content">
					<view class="basils_title">解答依据：</view>
					<view class="basils_li">
						<rich-text :nodes="problemInfo.pursuant_content"></rich-text>
					</view>

					<view class="source" v-if="sourceList.length > 0">
						<view class="source_li" v-for="(item, index) in sourceList" :key="index" @click="goSource(item)">
							<u--image class="source_icon" width="30rpx" height="30rpx"
								src="/static/img/library/problem/link_icon.png"></u--image>
							<view class="source_title">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 完成任务提示 -->
		<pointsTips v-if="showPointsTips" :title="pointsObj.name" :points="pointsObj.amount"></pointsTips>
	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../library/problem/details/index"></script>

<style lang="scss" scoped>
.main {
	background: #fff !important;
	min-height: 100vh;
	.content {
		padding: calc(var(--status-bar-height) * 2) 35rpx 0 35rpx;

		.content_title {
			font-size: 38rpx;
			font-weight: 700;
			color: #333333;
			line-height: 55rpx;
		}

		.content_dsc {
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #333333;
			line-height: 55rpx;
			letter-spacing: 2rpx;
			white-space: pre-line;
		}


		.content_basis {
			width: 680rpx;
			background: #F7F7F7;
			border-radius: 11rpx;
			margin-top: 30rpx;
			padding: 30rpx;

			.basils_item {
				.basils_title {
					font-size: 26rpx;
					font-weight: 600;
					color: #3473B3;
				}

				.basils_li {
					margin-top: 27rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					margin-bottom: 20rpx;
					white-space: pre-wrap;
				}
			}

			.source {
				margin-top: 28rpx;
				padding-top: 20rpx;
				border-top: 2rpx solid #E4E4E4;

				.source_li {
					display: flex;
					align-items: start;
					margin-bottom: 20rpx;

					.source_icon {
						margin-right: 15rpx;
					}

					.source_title {
						width: 94%;
						font-size: 24rpx;
						color: #3473B3;
						line-height: 36rpx;
					}
				}
			}
		}
	}
}
</style>
